<template>
    <div>
        <PageTitle>登录</PageTitle>
        <div class="pages-top pages-scroll-two">
            <div id="login-img">
                <router-link to="/"><img src="../../static/img/V7_logo.png"></router-link>
            </div>
            <div id="login-flex">
                <div @click="pswClick" :class="isborder?'isborder':''">密码登录</div>
                <div @click="msgClick" :class="isborder?'':'isborder'">短信登录</div>
            </div>
            <component :is="crrentView"></component>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import PswLogin from "../components/PswLogin.vue";
import MsgLogin from "../components/MsgLogin.vue";
export default {
    components:{PageTitle,PswLogin,MsgLogin},
    data(){
        return {
            crrentView:PswLogin,
            isborder:true,
        }
    },
    methods:{
        pswClick(){
            this.crrentView = PswLogin;
            this.isborder = true;
        },
        msgClick(){
            this.crrentView = MsgLogin;
            this.isborder = false;
        }
    }
}
</script>
<style scoped>
    #login-img{
        text-align: center;
        margin: 5.6vw 0;
    }
    img{
        width: 47.04vw;
    }
    #login-flex{
        width: 60%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        font-size: 3.92vw;
    }
    .isborder{
        padding-bottom: 0.56vw;
        border-bottom: red solid 1px;
    }
</style>